<template>
  <view>
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor title="我的地址" />

    <view class="container">
      <view class="page-container">
        <!-- 骨架屏 -->
        <view class="skeleton-view" v-if="loading && !list.length">
          <view
            class="skeleton-item"
            v-for="(item, index) in Array(3)"
            :key="index"
          >
            <u-skeleton rows="3" loading :title="false" />
          </view>
        </view>

        <view v-else>
          <image
            src="@/static/image/address/default.png"
            mode="widthFix"
            class="default-png"
            v-if="!list.length"
          />
          <view
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="itemClick(item)"
          >
            <view class="left">
              <u-icon
                name="checkmark-circle-fill"
                color="#FE774C"
                size="16"
                v-if="currentAddress && currentAddress.id == item.id"
              />
              <view class="default" v-else></view>
            </view>
            <view class="content">
              <view class="name">
                {{ `${item.province} ${item.city} ${item.district}` }}
              </view>
              <view class="more text-line">
                {{ item.streetCommunity + item.detail }}
              </view>
              <view class="phone flex flex-middle flex-left">
                {{
                  `${item.realName} ${
                    item.sex == 1 ? "先生" : "女士"
                  } ${phoneCode(item.phone)}`
                }}
                <view class="tag" v-if="item.isDefault"> 默认 </view>
              </view>
            </view>

            <view class="btn-view flex flex-middle">
              <view
                class="btn-item flex flex-middle flex-center"
                @click.stop="toForm(1, item.id)"
              >
                <image src="@/static/image/address/edit.png" mode="widthFix" />
              </view>
              <view
                class="btn-item flex flex-middle flex-center"
                @click.stop="deleteAddress(item)"
              >
                <image
                  src="@/static/image/address/delete.png"
                  mode="widthFix"
                />
              </view>
            </view>
          </view>
        </view>

        <u-loadmore
          :status="loadStatus"
          :nomoreText="totalPage ? '没有更多了' : '暂无地址信息'"
        />
      </view>
    </view>

    <view class="bottom safe-bottom">
      <view class="bottom-container">
        <view class="page-container safe-bottom">
          <view class="btn flex flex-middle flex-center" @click="toForm(0)">
            + 新增地址
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getAddressList, deleteAddress } from "@/api/address";

export default {
  data() {
    return {
      fromOrder: false,
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
    };
  },
  computed: {
    ...mapGetters(["editAddress", "currentAddress"]),
    loadStatus() {
      let str = this.loading
        ? "loading"
        : this.totalPage <= this.page
        ? "nomore"
        : "loadmore";
      return str;
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getAddressList();
  },
  onLoad({ order }) {
    if (order) this.fromOrder = true;
    this.refresh();
  },
  onShow() {
    if (this.editAddress) {
      this.refresh();
      this.$store.commit("SET_EDIT_ADDRESS", false);
    }
  },
  methods: {
    phoneCode(phone) {
      const left = phone.slice(0, 3);
      const right = phone.slice(7, 11);
      return `${left}****${right}`;
    },
    refresh() {
      this.list = [];
      this.page = 1;
      this.getAddressList();
    },
    async getAddressList() {
      this.loading = true;
      const { data } = await getAddressList({
        page: this.page,
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
    itemClick(item) {
      this.$store.commit("SET_CURRENT_ADDRESS", item);
      if (this.fromOrder) this.$navigateBack();
    },
    toForm(edit, id = 0) {
      this.$navigateTo(
        `/pages/address/form${edit ? "?edit=1" : ""}${id ? `&id=${id}` : ""}`
      );
    },
    async deleteAddress(item) {
      const res = await this.$dialog({
        showCancel: true,
        content: "确认删除地址？",
      });
      if (!res) return;
      this.$loading();
      const { code } = await deleteAddress({
        id: item.id,
      });
      this.$loading.close();
      if (code == 200) {
        this.$toast("删除成功");
        this.refresh();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.default-png {
  width: 248px;
  margin: 58px auto 0;
  display: block;
}

.skeleton-view {
  .skeleton-item {
    padding: 12px 0;
  }
}

.container {
  position: relative;
  padding: 0 16px;
}

.item {
  overflow: hidden;
  border-bottom: 1px solid #d9d9d9;
  padding: 16px 0;
  position: relative;

  .btn-view {
    position: absolute;
    right: 0;
    bottom: 16px;

    .btn-item {
      width: 22px;
      height: 22px;
      margin-left: 12px;

      image {
        width: 16px;
      }
    }
  }

  .content {
    padding-left: 22px;

    .name {
      color: #232323;
    }

    .more {
      color: #232323;
      font-size: 16px;
      font-weight: bold;
    }

    .phone {
      color: #232323;
      margin-top: 4px;

      .tag {
        color: #fe774c;
        margin-left: 8px;
        height: 18px;
        line-height: 18px;
        padding: 0 4px;
        border-radius: 4px;
        background: #fff3ee;
      }
    }
  }

  .left {
    float: left;
    padding-top: 2px;

    .default {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #999;
    }
  }
}

.bottom {
  height: 72px;

  .bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    padding: 16px 0;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);

    .btn {
      margin: 0 54px;
      height: 40px;
      border-radius: 20px;
      background: #31bc4e;
      color: #fff;
    }
  }
}
</style>